<template>
  <view class="verification-success">
    <!-- 顶部导航栏 -->
    <!-- 头部 -->
    		<u-navbar 
    			title="实名认证"
    			:border="false"
    			bgColor="#FFFFFF"
    			titleColor="#333333"
    			:titleStyle="{ fontSize: '36rpx', fontWeight: '500' }"
    			leftIcon="arrow-left"
    			@leftClick="goBack"
    			placeholder
    		></u-navbar>
    
    <!-- 成功提示区域 -->
    <view class="success-section">
      <view class="success-icon">
        <u-icon name="checkbox-mark" size="40" color="#FFFFFF"></u-icon>
      </view>
      <text class="success-text">您已实名认证</text>
    </view>
    
    <!-- 用户信息展示 -->
    <view class="user-info-section">
      <view class="info-item">
        <text class="info-label">*真实姓名</text>
        <text class="info-value">{{ userInfo?.realName || '未认证' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">*身份证号</text>
        <text class="info-value">{{ userInfo?.idNumber || '未认证' }}</text>
      </view>
    </view>
    
    <!-- 隐私声明 -->
    <view class="privacy-section">
      <text class="privacy-text">1.身份证信息仅供平台提供招聘服务使用</text>
      <text class="privacy-text">2.平台承诺不向其他第三方透露您的个人信息</text>
    </view>
    
    <!-- 解绑按钮 -->
    <view class="unbind-section">
      <view class="unbind-btn" @click="unbindVerification">
        <text class="unbind-text">解绑实名</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { userStore } from '@/stores/userStore'
import { userApi } from '@/api/api-helper.js'

// 获取用户信息
const userInfo = computed(() => userStore.userInfo.value)

onMounted(() => {
  // 页面加载完成
  console.log('实名认证成功页面加载完成')
})

// 返回：從成功頁直接回到“我的”（tabBar 頁）
const goBack = () => {
  uni.switchTab({ url: '/pages/profile/profile' })
}

// 解绑实名认证
const unbindVerification = () => {
  uni.showModal({
    title: '确认解绑',
    content: '确定要解绑实名认证吗？解绑后将无法享受相关服务。',
    success: async (res) => {
      if (!res.confirm) return
      const appUserId = userStore.getOpenId()
      if (!appUserId) {
        uni.showToast({ title: '未找到用户ID，无法解绑', icon: 'none' })
        return
      }
      try {
        uni.showLoading({ title: '处理中...' })
        const result: any = await userApi.deleteAppUser(appUserId)
        uni.hideLoading()
        if (result && result.code === 200) {
          // 清理本地用戶緩存並回到默認狀態
		  userStore.logout()
          userStore.initDefaultUserInfo()
		  userStore.updateUserInfo({openId:appUserId})
		  uni.setStorageSync('last_signup', null)
          uni.showToast({ title: '解绑成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1200)
        }
      } catch (error) {
        uni.hideLoading()
        console.error('解绑失败', error)
        // 全局攔截已提示，這裡保底提示
        uni.showToast({ title: '解绑失败', icon: 'none' })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.verification-success {
  min-height: 100vh;
  background-color: #FFFFFF;
}

// 顶部导航栏
.navbar {
  background-color: #FFFFFF;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.navbar-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: 500;
}

.navbar-right {
  width: 120rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.action-dots,
.action-line,
.action-circle {
  font-size: 24rpx;
  color: #666666;
}

// 成功提示区域
.success-section {
  padding: 80rpx 30rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  background-color: var(--u-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.success-text {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

// 用户信息展示
.user-info-section {
  padding: 0 30rpx 40rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 28rpx;
  color: #333333;
  position: relative;
  
  &::before {
    content: '*';
    color: #FF0000;
    margin-right: 4rpx;
  }
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

// 隐私声明
.privacy-section {
  padding: 0 30rpx 60rpx;
}

.privacy-text {
  display: block;
  font-size: 24rpx;
  color: #999999;
  line-height: 1.6;
  margin-bottom: 10rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

// 解绑按钮
.unbind-section {
  padding: 0 30rpx 40rpx;
}

.unbind-btn {
  width: 100%;
  height: 88rpx;
  background: #FFFFFF;
  border: 2rpx solid #E0E0E0;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unbind-text {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}
</style> 